<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
const step = ref(1);
/* 表单验证 */
interface RuleForm {
  email: string;
  emailCode: string;
  pwd: string;
  newPwd: string;
}
const equalToPassword = (rule: any, value: any, callback: any) => {
  if (ruleForm.pwd !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: "请输入登录邮箱账号", trigger: "blur" },
    { validator: rule.email, trigger: "blur" },
  ],
  emailCode: [{ required: true, message: "请输入邮箱验证码", trigger: "blur" }],
  pwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { validator: rule.validatePass, trigger: "blur" },
  ],
  newPwd: [
    { required: true, message: "再次新输入密码", trigger: "blur" },
    { validator: equalToPassword, trigger: "blur" },
  ],
});
const ruleForm = reactive<RuleForm>({
  email: "",
  emailCode: "",
  pwd: "",
  newPwd: "",
});
const ruleFormRef = ref<FormInstance>();
const btnLoading = ref(false);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (step.value === 2) {
    return navigateTo("/");
  }
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      btnLoading.value = true;
      useApi()
        .user.resetPwd(ruleForm)
        .then((res: any) => {
          btnLoading.value = false;
          console.log(res);
          step.value++;
          ElMessage({
            message: res.msg || "重置成功~",
            type: "success",
          });
        })
        .catch(() => {
          btnLoading.value = false;
        });
    }
  });
};

const btnTxt = computed(() => {
  interface StepText {
    [key: number]: string;
    1: string;
    2: string;
  }
  const txt: StepText = {
    1: "下一步",
    2: "去登陆",
  };
  return txt[step.value as keyof StepText];
});
</script>

<template>
  <div class="pages">
    <div class="content">
      <h1 class="title">忘记密码</h1>
      <div class="register">
        <Step :active="step" />
        <div class="form">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            style="max-width: 600px"
            :label-width="120"
            label-position="left"
            class="ruleForm"
          >
            <template v-if="step === 1">
              <el-form-item label="登录账号" prop="email">
                <el-input
                  v-model="ruleForm.email"
                  clearable
                  placeholder="请输入登录邮箱账号"
                />
              </el-form-item>
              <el-form-item label="验证码" prop="emailCode">
                <div class="yzm-code">
                  <el-input
                    clearable
                    v-model="ruleForm.emailCode"
                    placeholder="请输入验证码"
                  />
                </div>
                <div class="get-code">
                  <span
                    v-if="!getEmailTimer('RESETPWD')"
                    class="code-send"
                    @click="getEmailCode('RESETPWD', ruleForm.email)"
                    >获取验证码</span
                  >
                  <span v-else>{{ getEmailTimer("RESETPWD") }}s</span>
                </div>
              </el-form-item>
            </template>
            <template v-if="step === 1">
              <el-form-item label="输入新密码" prop="pwd">
                <el-input
                  autocomplete="new-password"
                  v-model="ruleForm.pwd"
                  clearable
                  type="password"
                  placeholder="请输入新密码"
                />
                <p class="input-tip">
                提示：密码需包含英文，数字，特殊字符，且密码不少于8位
                </p>
              </el-form-item>
              <el-form-item label="再次输入密码" prop="newPwd">
                <el-input
                  autocomplete="new-password"
                  v-model="ruleForm.newPwd"
                  clearable
                  type="password"
                  placeholder="请再次输入新密码"
                />
              </el-form-item>
            </template>
            <template v-if="step === 2">
              <div class="success">
                <img src="/images/layouts/success.png" alt="" />
                <p>密码重置成功</p>
              </div>
            </template>
            <el-button
              :loading="btnLoading"
              class="register-btn"
              @click="submitForm(ruleFormRef)"
            >
              {{ btnTxt }}
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages {
  padding-top: 40px;
  padding-bottom: 106px;
  box-sizing: border-box;
  background: #fafafa;
  :deep(.el-form-item__content) {
    width: 450px;
    border-color: #c2cbdd;
    .el-input__inner {
      line-height: 40px;
      height: 40px;
      &::-webkit-input-placeholder {
        font-weight: 400;
        font-size: 14px;
        color: #c2cbdd;
      }
    }
  }
  .yzm-code {
    width: 367px;
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
    font-size: 14px;
    color: #202949;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .register-btn {
    width: 280px;
    height: 44px;
    background: #e22000;
    font-weight: 400;
    font-size: 14px;
    border-color: #e22000;
    margin: 40px auto 20px auto;
    display: block;
    color: #ffffff;
    &:hover {
      opacity: 0.8;
    }
  }

  .title {
    font-weight: 500;
    font-size: 28px;
    color: #000000;
  }

  .register {
    background: #ffffff;
    margin-top: 22px;
    padding: 40px 0;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    min-height: 614px;
  }

  .form {
    margin-top: 54px;
    display: flex;
    justify-content: center;
  }

  .input-tip {
    font-weight: 400;
    font-size: 14px;
    color: #95a0b5;
  }

  .get-code {
    margin-left: 13px;
    .code-send {
      cursor: pointer;
    }
    span {
      font-weight: 400;
      font-size: 14px;
      color: #e12010;
    }
  }
  .success {
    text-align: center;
    p {
      font-weight: 400;
      font-size: 14px;
      color: #202949;
      margin-top: 12px;
    }
    img {
      width: 62px;
      height: 62px;
      display: inline-block;
    }
  }
}
</style>
